<template>
	<view class="pageAll">
		<view class="search">
			<view class="searchText">
				<image :src="searchIcon" mode="widthFix"></image>
				<input type="text" placeholder="请输入文件名" confirm-type="search" v-model="searchText" />
			</view>
			<view class="searchBtn">
				<view @click="search">
					搜索
				</view>
			</view>
		</view>

		<view class="fileType">
			<button class="fileTypeLeft" :class="{'activeFileBtn':currutType === 1}" @click="changeTag(1)">红标公告</button>
			<button class="fileTypeRight" :class="{'activeFileBtn':currutType === 2}" @click="changeTag(2)">红标活动</button>
		</view>


		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="files" @scroll="scroll" scroll-with-animation="true"
		 @scrolltolower="scrollToLower ">
			<view class="subFiles">
				<view v-for="(item,index) in list" :key="index" class="theFile" @click="toFileDetails(currutType,item.title, item.id)">
					<fileViewLong :info="item" :imgType="'img'" />
				</view>
			</view>
			<nonePage v-if="!(list && list.length > 0)" />
		</scroll-view>
		<flexBtn @click.native="goTop" />
	</view>
</template>

<script>
	import flexBtn from '../../../components/commonCom/flexBtn.vue'
	import fileViewLong from '../../../components/commonCom/fileViewLong.vue'
	import nonePage from '../../../components/commonCom/nonePage.vue'
	export default {
		data() {
			return {
				scrollTop: 0, // 滚动条高度
				old: {
					scrollTop: 0
				},
				searchIcon: require('../../../static/index/searchIcon.png'), // 搜索图标
				currutType: 1, //1为文件 2为公告
				currutPage: 1,
				lastPage: 1,
				announcementList: [], // 公告列表
				activeList: [], // 活动列表
				isAlready: false,
				searchText: '',
				isWorking: false, // 防止用户多次点击
				pageSize: 8, // 每次请求的数据长度
			}
		},
		computed: {
			list() {
				// currutType 不同，获取不同的数据 1为文件 2为公告
				if (this.currutType === 1) {
					return this.announcementList;
				} else {
					return this.activeList;
				}
			}
		},
		methods: {
			changeTag(type){
				this.currutPage = 1
				this.changeContent(type, false)
			},
			// 下拉刷新
			scrollToLower() {
				if (this.currutPage < this.lastPage) {
					this.currutPage ++
					this.changeContent(this.currutType, true)
				}
			},
			// 搜索
			search() {
				if (this.searchText) {
					// 防止用户多次点击
					if(this.isWorking) {
						return false
					} else {
						this.isWorking = true
					}
					this.$api.fileInquire({
						content: this.searchText
					}).then(res => {
						if (res.status) {
							this.activeList = JSON.parse(JSON.stringify(res.data.activity))
							this.announcementList = JSON.parse(JSON.stringify(res.data.notice))
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1500,
							})
						}
						this.isWorking = false
					})
					.catch(err => {
						this.isWorking = false
					})
				} else {
					this.changeContent(this.currutType, false)
				}
			},
			//  跳转至文件详情
			toFileDetails(type, title, id) {
				if (type === 1) {
					uni.navigateTo({
						url: '../fileDetails/fileDetails?type=' + type + '&title=' + title + '&id=' + id
					});
				} else {
					uni.navigateTo({
						url: '../fileDetails/fileDetails?type=' + type + '&title=' + title + '&id=' + id
					});
				}
			},
			// 监听滚动事件
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 滚动条移动到顶部
			goTop() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},
			// 切换类型
			changeContent(value, isAdd) {
				this.currutType = value
				if (value === 1) {
					uni.setNavigationBarTitle({
						title: '红标公告'
					});
					this.$api.noticeList({
							page: this.currutPage,
							pagesize: this.pageSize,
							content: this.searchText
						})
						.then(res => {
							if (res.status) {
								this.isAlready = true
								if(isAdd) {
									for(let index in res.data.data) {
										if(res.data.data.hasOwnProperty(index)) {
											this.announcementList.push(res.data.data[index])
										}
									}
								} else {
									this.goTop();
									this.announcementList = JSON.parse(JSON.stringify(res.data.data))
								}
								this.lastPage = res.data.last_page
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}

						})
				} else {
					uni.setNavigationBarTitle({
						title: '红标活动'
					});
					this.$api.activityList({
							page: this.currutPage,
							pagesize: this.pageSize,
							content: this.searchText
						})
						.then(res => {
							if (res.status) {
								this.isAlready = true
								if(isAdd) {
									for(let index in res.data.data) {
										if(res.data.data.hasOwnProperty(index)) {
											this.activeList.push(res.data.data[index])
										}
									}
								} else {
									this.goTop();
									this.activeList = JSON.parse(JSON.stringify(res.data.data))
								}
								this.lastPage = res.data.last_page
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}

						})
				}
			},
		},
		components: {
			fileViewLong,
			flexBtn,
			nonePage,
		},
		onLoad(params) {
			this.currutType = parseInt(params.type)
			console.log(parseInt(params.type))
			this.changeContent(this.currutType, false)
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.search {
		background-color: #ffc8c7;
		border-radius: 20upx;
		height: 80upx;
		padding: 12upx;
		display: flex;
		flex-wrap: nowrap;
		box-shadow: 0 0 25upx -10upx #b31f1f;
	}

	.searchText {
		width: 85%;
		display: flex;
		flex-wrap: nowrap;
		background-color: #FFF;
		line-height: 150upx;
		border-radius: 15upx;
	}

	.searchText image {
		text-align: center;
		vertical-align: middle;
		padding-left: 20upx;
		width: 37.33upx;
		margin: auto 0;
	}

	.searchText input {
		background-color: #FFF;
		height: 100%;
		color: #6d6d6d;
		font-size: 32upx;
		padding-left: 40upx;
	}

	.searchBtn {
		width: 15%;
		border: none;
		background: rgba(0, 0, 0, 0);
		height: 100%;
		display: flex;
	}

	.searchBtn view {
		color: #6d6d6d;
		font-size: 32upx;
		background: rgba(0, 0, 0, 0);
		width: 100%;
		border: none;
		text-align: center;
		margin: auto 0;
	}

	.fileType {
		display: flex;
		flex-wrap: nowrap;
		margin-top: 46.66upx;
		height: 100upx;
		box-shadow: 0 0 15upx 5upx rgba(179, 31, 31, 0.15);
		border-radius: 15upx;
		line-height: 100upx;
	}

	.fileType button {
		width: 50%;
		background-color: #FFF;
		border-radius: 0;
		color: #000;
		line-height: 100upx;
	}

	.fileType button:after {
		border: 0;
	}

	.fileTypeLeft {
		border-bottom-left-radius: 15upx !important;
		border-top-left-radius: 15upx !important;
	}

	.fileTypeRight {
		border-bottom-right-radius: 15upx !important;
		border-top-right-radius: 15upx !important;
	}

	.activeFileBtn {
		background-color: #f7533e !important;
		color: #FFF !important;
	}

	.files {
		position: absolute;
		top: 260upx;
		bottom: 0;
		left: 0;
		right: 0;
		margin-top: 20upx;
	}

	.subFiles {
		padding: 0 17upx;
	}

	.files::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.theFile {
		height: 236.66upx;
		background-color: #FFF;
		padding: 17upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
	}
</style>
